<template>
  <div class="integerl">
    <div class="header">
      <van-nav-bar
        title="兑换记录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="integerl-wranp" v-for="item in orderList">
      <div class="order-code">
        <span>订单编号：{{item.number}}</span>
        <span v-if="item.status == 0">待发货</span><span v-else>已发货</span>
      </div>
      <div class="goods">
        <div class="goods-img">
          <img src="../../assets/tgsp.png" alt="">
        </div>
        <div class="goods-info">
          <div class="goods-name">{{item.title}}</div>
          <div class="goods-spec">
            <div>
              <div>{{item.spec1}}{{item.spec2}}；{{item.spec3}}}</div>
              <!-- <div><van-icon name="arrow-down" /></div> -->
            </div>
          </div>
          <div class="goods-price">
            <div class="goods-price-l">
              <div><span>{{item.integral}}</span>积分</div>
              <div>{{item.integraled}}积分</div>
            </div>
            <div class="goods-count">
              x{{item.amount}}
            </div>
          </div>
        </div>
      </div>
      <div class="pay">
        <div>{{item.data}}</div>
        <div>实际支付： {{item.payment}}积分</div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request.js'
import { Notify } from 'vant';
import { Popup } from 'vant';

export default {
  data() {
    return {
      orderList: {},
    };
  },

  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    getOrderListInfo(){
      request({
        url: `?controller=theapi2&action=coupon_change`,
        method: 'get'
      }).then(res=>{
        this.orderList = res.data
      })
    }
  },
  created(){
    // 获取地址信息
    this.getOrderListInfo()
  }
};
</script>

<style lang="scss" scoped>
.van-nav-bar .van-icon, .van-nav-bar__title{
  color: #191E2A;
}
.van-nav-bar__text{
  color: #191E2A;
}
.integerl{
  position: absolute;
  width: 100%;
  min-height: 100%;
  background: #F5F6F7;
  padding: 0.92rem 0 0 0;
  > .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
}
.integerl-wranp{
  position: relative;
  margin: 0.2rem 0 0 0;
  color: #191E2A;
  background: #fff;
  z-index: 1;

  /*订单编号*/
  > .order-code{
    padding: 0.3rem 0 0.3rem 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.26rem;
    border-bottom: 0.01rem solid #EFF1F3;
    > span{
      color: #B3B5B8;
    }
    > span:last-of-type{
      margin: 0 0.3rem 0 0;
      color: #F52E67;
    }
    
  }
  /* 商品*/
  > .goods{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem;
    > .goods-img{
      border: 1px solid #EFF1F3;
      width: 2.28rem;
      height: 2.28rem;
      overflow: hidden;
      flex: none;
      > img{
        width: 100%;
        height: 100%;
      }
    }
    > .goods-info{
      position: relative;
      margin: 0 0 0 0.3rem;
      height: 2.28rem;
      flex-grow: 1;
      > .goods-name{
        font-size: 0.3rem;
        font-weight: 600;
      }
      > .goods-spec{
        margin: 0.3rem 0 0 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.21rem;
        color: #C1C3C6;
        > div:first-of-type{
          display: flex;
          align-items: center;
          font-size: 0.12rem;
          padding: 0.01rem 0.04rem;
          background: #F5F5F6;
          border-radius: 0.04rem;
          > div:last-of-type{
            margin: 0 0 0 0.2rem;
          }
        }
      }
      .goods-price{
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        bottom: 0;
        left: 0;
        > .goods-price-l{
          display: flex;
          align-items: flex-end;
          > div span{
            color: #F52E67;
            font-size: 0.32rem;
            margin: 0 0.06rem 0 0;
          }
          > div:last-of-type{
            margin: 0 0 0 0.2rem;
            color: #B3B5B8;
            text-decoration-line: line-through;
          }
        }
      }
    }
  }
  /*商品结束*/
  .pay{
    padding: 0.3rem 0.3rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.26rem;
    > div:first-of-type{
      color: #B3B5B8;
    }
  }
}
</style>
